<template>
  <div class="app">
    <textarea cols="30" rows="10" v-maxlength="20" v-model="ipt"></textarea>

    <V11112 type="input" maxlength="10" />
    <V11112 type="textarea" maxlength="30" />
  </div>
</template>

<script>
import V11112 from "./V11112";
export default {
  data() {
    return {
      ipt: "",
    };
  },
  components: {
    V11112,
  },
  directives: {
    maxlength: {
      inserted(el, binding) {
        let parentWp = el.parentNode; //app
        let iptWp = document.createElement("div");
        let span = document.createElement("span");
        parentWp.replaceChild(iptWp, el);
        iptWp.appendChild(el);
        iptWp.appendChild(span);
        iptWp.style = "position: relative;display:inline-block;";
        if (el.tagName == "TEXTAREA") {
          span.style =
            " position:absolute;bottom: 8px;right: 5px;font-size:10px;color:#999";
        } else if (el.tagName == "INPUT") {
          span.style =
            " position:absolute;top: 5px;right: 3px;font-size:10px;color:#999";
        }
        span.innerHTML = "0/" + binding.value;

        el.setAttribute("maxlength", binding.value);
      },
      update(el, binding) {
        let iptLen = el.value.length;
        let span = el.nextElementSibling;
        span.innerHTML = iptLen + "/" + binding.value;
        if (iptLen == binding.value) {
          el.style.color = "red";
        } else {
          el.style.color = "";
        }
      },
    },
  },
};
</script>

<style></style>
